<template>
    <div>
        <Modal v-model="show" title="添加父菜单"
               :mask-closable="false" :closable="false">
            <Form ref="modalForm" :model="modal" :label-width="80" :rules="rules">
                <FormItem label="名称" prop="name">
                    <Input v-model.trim="modal.name"/>
                </FormItem>
                <FormItem label="菜单类型">
                    <Select v-model.trim="modal.type" style="width:100%">
                        <Option v-for="item in [{label:'菜单',value:0}]"
                                :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="菜单链接">
                    <Input v-model.trim="modal.url"/>
                </FormItem>
                <FormItem label="菜单键值">
                    <Input v-model.trim="modal.permission"/>
                </FormItem>
                <FormItem label="文件位置">
                    <Input v-model.trim="modal.target"/>
                </FormItem>
                <FormItem label="图标">
                    <Input v-model.trim="modal.icon"/>
                </FormItem>
                <FormItem label="请求方式">
                    <Input v-model.trim="modal.requestMethod" @on-change="toUppercase()"/>
                </FormItem>
                <FormItem label="是否显示">
                    <Select v-model.trim="modal.display" style="width:100%">
                        <Option v-for="item in [{label:'否',value:0}, {label:'是',value:1}]"
                                :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="排序">
                    <InputNumber :min="0" :step="1" v-model.trim="modal.sort" style="width:100%"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';

    export default {
        data() {
            return {
                loading: false,
                show: true,
                modal: {
                    name: '',
                    type: 0,
                    url: '',
                    permission: '',
                    icon: '',
                    requestMethod: '',
                    display: 1,
                    sort: 0
                },
                rules: {
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            ...mapActions(['addMenu']),
            toUppercase() {
                this.modal.requestMethod = this.modal.requestMethod.toUpperCase();
            },
            cancel(reload = false) {
                this.$emit('cancel', 'add', reload);
            },
            ok() {
                this.loading = true;
                this.$refs['modalForm'].validate((valid) => {
                    if (valid) {
                        this.addMenu({
                            menuName: this.modal.name,
                            menuKey: this.modal.permission,
                            menuType: this.modal.type,
                            menuIcon: this.modal.icon,
                            requestMethod: this.modal.requestMethod,
                            menuUrl: this.modal.url,
                            menuTarget: this.modal.target,
                            display: this.modal.display,
                            sort: this.modal.sort
                        }).then(res => {
                            if (res.code === '0000') {
                                this.$Message.success('菜单 ' + this.modal.name + ' 添加成功');
                                this.cancel(true);
                                this.loading = false;
                            } else {
                                this.$Message.error(this.$t('addDataFailed'));
                                this.loading = false;
                            }
                        });
                    } else {
                        this.loading = false;
                    }
                });
            }
        }
    };
</script>

<style scoped>

</style>